import React, { useEffect, useState } from 'react'
import Home from './views/Home'
import Comment from './views/Comment'
import Search from './views/Search'

export default function App() {
  const [currentHash, setCurrentHash] = useState('#/')

  // 组件一进入, 注册全局hashchange事件, 获取当前hash值
  useEffect(() => {
    const change = () => {
      console.log(window.location.hash)
      setCurrentHash(window.location.hash)
    }
    window.addEventListener('hashchange', change)

    return () => {
      window.removeEventListener('hashchange', change)
    }
  })

  return (
    <div>
      <h2>App</h2>
      <hr />
      {currentHash === '#/' && <Home></Home>}
      {currentHash === '#/Comment' && <Comment></Comment>}
      {currentHash === '#/Search' && <Search></Search>}
    </div>
  )
}
